<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0009: Boxes | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0009: Boxes" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="How to add widgets to a GTK Box - a D language tutorial." />
<meta property="og:description" content="How to add widgets to a GTK Box - a D language tutorial." />
<link rel="canonical" href="http://localhost:4000/posts/0009-boxes.html" />
<meta property="og:url" content="http://localhost:4000/posts/0009-boxes.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-02-12T00:00:00-05:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0009: Boxes" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-02-12T00:00:00-05:00","datePublished":"2019-02-12T00:00:00-05:00","description":"How to add widgets to a GTK Box - a D language tutorial.","headline":"0009: Boxes","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0009-boxes.html"},"url":"http://localhost:4000/posts/0009-boxes.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/box.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-02-12T00:00:00-05:00" itemprop="datePublished">Tuesday, February 12, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h2 id="0009-boxes">0009: Boxes</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/003_box/box_01.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																<!-- modal# -->
				<span class="close0">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img00" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");														// img#
			var modalImg = document.getElementById("img00");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/003_box/box_01_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																			<!-- modal# -->
				<span class="close1">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img11" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																	// img#
			var modalImg = document.getElementById("img11");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!--------- filename (below) ------>
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/003_box/box_01_add.d" target="_blank">here</a>.
	</div>
</div>

<p>Today we’ll see how to get more than one widget into a window using a GTK container type called a <em>Box</em>. We’ll use two different techniques, adding and packing. And even though we don’t really talk about it, there’s a third example which, when compared to the second example, shows the difference between <code class="language-plaintext highlighter-rouge">packStart()</code> and <code class="language-plaintext highlighter-rouge">packEnd()</code>. You’ll find that example near the end of this post.</p>

<h3 id="containers">Containers</h3>

<p>This is a whole can of worms, this container stuff. <em>GTK</em> has several types and the one you’ll pick will depend partly on whether you want to handle the layout yourself or leave it up to <em>GTK</em>. Other criteria include spacing of child widgets within the box, absolute or relative placement, padding, etc.</p>

<p>A <em>GTK</em> <code class="language-plaintext highlighter-rouge">Box</code> is the simplest of the containers. The order you add things to the box is the order they appear. If the box is oriented vertically, the first widget will be at the top, the last at the bottom. And if it’s oriented horizontally, they’ll go left to right.</p>

<p>We have three methods for getting things into a <code class="language-plaintext highlighter-rouge">Box</code>, <code class="language-plaintext highlighter-rouge">add()</code>, <code class="language-plaintext highlighter-rouge">packStart()</code>, and <code class="language-plaintext highlighter-rouge">packEnd()</code>. The <code class="language-plaintext highlighter-rouge">add()</code> function just piles things in there (although the analogy of the box breaks down when you realize the first thing you throw in doesn’t end up at the bottom of the box.) This isn’t all that surprising because <code class="language-plaintext highlighter-rouge">add()</code> is inherited from <em>GTK</em> <code class="language-plaintext highlighter-rouge">Container</code> which itself is generic.</p>

<p>The pack functions, on the other hand, give you more control. They originate as functions in the <code class="language-plaintext highlighter-rouge">Box</code> class and give you some control over how your widget critters are crammed in. You even get to spoil one or more child widgets by allowing them to expand and take over most of the space, leaving the non-expanded children to huddle together in whatever space is left over.</p>

<h3 id="more-buttons">More Buttons</h3>

<p>As there would be little point in showing a box example containing a single widget (who would even know the <code class="language-plaintext highlighter-rouge">Box</code> was there?) we’ll work with three buttons.</p>

<h3 id="and-the-box">And the Box</h3>

<p>The code for the <code class="language-plaintext highlighter-rouge">Box</code> looks like this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">AddBox</span> <span class="p">:</span> <span class="n">Box</span>
<span class="p">{</span>
	<span class="nb">string</span><span class="p">[]</span> <span class="n">labels</span> <span class="p">=</span> <span class="p">[</span><span class="s">"Button 01"</span><span class="p">,</span> <span class="s">"Button 02"</span><span class="p">,</span> <span class="s">"Button 03"</span><span class="p">];</span>
	<span class="n">ActionButton</span><span class="p">[]</span> <span class="n">buttons</span><span class="p">;</span>
	
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="kt">int</span> <span class="n">buttonCount</span> <span class="p">=</span> <span class="mi">0</span><span class="p">;</span>
		
		<span class="k">super</span><span class="p">(</span><span class="n">Orientation</span><span class="p">.</span><span class="n">VERTICAL</span><span class="p">,</span> <span class="mi">5</span><span class="p">);</span>
		<span class="c1">// super(Orientation.HORIZONTAL, 5);</span>

		<span class="k">foreach</span><span class="p">(</span><span class="n">label</span><span class="p">;</span> <span class="n">labels</span><span class="p">)</span>
		<span class="p">{</span>
			<span class="n">ActionButton</span> <span class="n">button</span> <span class="p">=</span> <span class="k">new</span> <span class="n">ActionButton</span><span class="p">(</span><span class="n">label</span><span class="p">);</span>
			<span class="n">buttons</span> <span class="p">~=</span> <span class="n">button</span><span class="p">;</span>
			<span class="n">add</span><span class="p">(</span><span class="n">buttons</span><span class="p">[</span><span class="n">buttonCount</span><span class="p">]);</span>
			<span class="n">buttonCount</span> <span class="p">+=</span> <span class="mi">1</span><span class="p">;</span>
		<span class="p">}</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>
	
<span class="p">}</span> <span class="c1">// class AddBox</span>
</code></pre></div></div>

<p>We’re using another derived class, the <code class="language-plaintext highlighter-rouge">AddBox</code>, with data in the form of arrays, one for button labels and the other for the button objects themselves. We could also have written out each declaration of <code class="language-plaintext highlighter-rouge">ActionButton</code> in full and kept the label text as simple arguments to each declaration. Perhaps it would have been a bit more typing, or maybe not. It really doesn’t matter and this took a bit more planning than doing it straight up, so it was a tad more engaging.</p>

<p>All we’re doing in the constructor is instantiating with <code class="language-plaintext highlighter-rouge">super()</code> and then stepping through the list of labels as we add buttons, stuffing each into the button object array in case we need to refer to them by name again later.</p>

<h4 id="the-actionbutton">The ActionButton</h4>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img2" src="../images/screenshots/003_box/box_02.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal2" class="modal">																<!-- modal# -->
				<span class="close2">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img22" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal2");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img2");														// img#
			var modalImg = document.getElementById("img22");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close2")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img3" src="../images/screenshots/003_box/box_02_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal3" class="modal">																			<!-- modal# -->
				<span class="close3">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img33" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal3");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img3");																	// img#
			var modalImg = document.getElementById("img33");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close3")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!--------- filename (below) ------------>
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/003_box/box_02_packstart.d" target="_blank">here</a>.
	</div>
</div>

<p>Nothing really new here. We’ve used this generic button so many times by now, you should know it well. The only new thing we’re doing is, as the user clicks each button, we grab the button’s actual label text to print out to the command line like this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">writeln</span><span class="p">(</span><span class="n">getLabel</span><span class="p">(),</span> <span class="s">" was pressed."</span><span class="p">);</span>
</code></pre></div></div>

<p>And that’s pretty much it for that example. On to packing…</p>

<h4 id="packing-a-box">Packing a Box</h4>

<p>Skipping right to where this example differs, let’s zero in on the <code class="language-plaintext highlighter-rouge">PackBox</code> class:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">PackBox</span> <span class="p">:</span> <span class="n">Box</span>
<span class="p">{</span>
	<span class="nb">string</span><span class="p">[]</span> <span class="n">labels</span> <span class="p">=</span> <span class="p">[</span><span class="s">"First Button"</span><span class="p">,</span> <span class="s">"Second Button"</span><span class="p">,</span> <span class="s">"Third Button"</span><span class="p">];</span>
	<span class="n">ActionButton</span><span class="p">[]</span> <span class="n">buttons</span><span class="p">;</span>
	
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="kt">int</span> <span class="n">countButts</span> <span class="p">=</span> <span class="mi">0</span><span class="p">;</span>
		
		<span class="k">super</span><span class="p">(</span><span class="n">Orientation</span><span class="p">.</span><span class="n">VERTICAL</span><span class="p">,</span> <span class="mi">5</span><span class="p">);</span>
		
		<span class="k">foreach</span><span class="p">(</span><span class="n">label</span><span class="p">;</span> <span class="n">labels</span><span class="p">)</span>
		<span class="p">{</span>
			<span class="n">ActionButton</span> <span class="n">button</span> <span class="p">=</span> <span class="k">new</span> <span class="n">ActionButton</span><span class="p">(</span><span class="n">label</span><span class="p">);</span>
			<span class="n">buttons</span> <span class="p">~=</span> <span class="n">button</span><span class="p">;</span>
			<span class="n">packStart</span><span class="p">(</span><span class="n">button</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
		<span class="p">}</span>

	<span class="p">}</span> <span class="c1">// this()</span>
	
<span class="p">}</span> <span class="c1">// class PackBox</span>
</code></pre></div></div>

<p>The only real difference here is in this line:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">packStart</span><span class="p">(</span><span class="n">button</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
</code></pre></div></div>

<p>There is a corresponding <code class="language-plaintext highlighter-rouge">packEnd()</code> and it really doesn’t matter which one you use. It’s a matter of aesthetics. Start from the start or start from the end. Pick one and go for it.</p>

<p>The arguments are:</p>

<ul>
  <li><strong>child</strong>: the name of the widget we’re packing,</li>
  <li><strong>expand</strong>: spoil the child, give it all the room it wants,</li>
  <li><strong>fill</strong>: a bit complex, so see the note below,</li>
  <li><strong>padding</strong>: extra space around the child.</li>
</ul>

<p>Okay, a bit of explanation about ‘<strong>fill</strong>.’ When a child widget is packed into a box, if the box is oriented vertically, the child gets its fair share of vertical space. It’s divided up evenly with all the other children… unless one or more is given the <strong>expand</strong> privilege. But what <strong>fill</strong> does is control how much space the child takes up on the other axis. If the <code class="language-plaintext highlighter-rouge">Box</code> is set to <code class="language-plaintext highlighter-rouge">Orientation.VERTICAL</code>, <strong>fill</strong> controls the <em>horizontal</em> space. And vice versa. When <code class="language-plaintext highlighter-rouge">Orientation.HORIZONTAL</code> is used, <strong>fill</strong> controls how much vertical space the child takes up.</p>

<p>And here’s the third example illustrating <code class="language-plaintext highlighter-rouge">packEnd()</code>:</p>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img4" src="../images/screenshots/003_box/box_06.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal4" class="modal">																<!-- modal# -->
				<span class="close4">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img44" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal4");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img4");														// img#
			var modalImg = document.getElementById("img44");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close4")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img5" src="../images/screenshots/003_box/box_06_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal5" class="modal">																			<!-- modal# -->
				<span class="close5">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img55" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal5");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img5");																	// img#
			var modalImg = document.getElementById("img55");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close5")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!---------- filename (below) ---------->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/003_box/box_06_packend.d" target="_blank">here</a>.
	</div>
</div>

<h3 id="conclusion">Conclusion</h3>

<p>And that is that. You now know how to pack a box as well as add things to it. Until next time, happy widgets and may the D-coding be yours.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0008-callbacks.html">Previous: Callbacks</a>
	</div>
	<div style="float: right;">
		<a href="./0010-checkbutton.html">Next: CheckButton</a>
	</div>
</div>

<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0009-boxes.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
